<template>
    <div class="sdy-register">
        <sdyHeader title="注册" back></sdyHeader>
        <van-steps class="steps" :active="active" finish-icon="star-o">
            <van-step >手机号验证</van-step>
            <van-step>验证码</van-step>
            <van-step>密码验证</van-step>
            <van-step>注册成功</van-step>
        </van-steps>

        <!-- 第一步：验证手机号是是否被注册过  -->
        <div v-if="active===0" class="step0 step-item">
            <van-form  @submit="checkPhoneHandler">
            <van-cell-group inset>
            <van-field
            v-model="phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号', pattern:/^1[3-9]\d{9}$/ }]"
            />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                验证
                </van-button>
            </div>
            </van-form>
        </div>
        

        <!-- 第二步： 获取验证码， 并验证验证码的正确性 -->
        <div v-if="active ===1"  class="step1 step-item">
            <van-form  @submit="checkCodeHandler">
                <van-cell-group inset>
                <van-field
                    v-model="code"
                    center
                    clearable
                    label="短信验证码"
                    placeholder="请输入短信验证码"
                >
                <template #button>
                <van-button :disabled="codeBtn" @click="sendCodeHandler" size="small" type="primary">发送验证码</van-button>
                </template>
                </van-field>
                </van-cell-group>
                <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                验证
                </van-button>
                </div>
            </van-form>
        </div>
        

        <!-- 第三部 : 验证两次密码一致-->
        <div v-if="active ===2" class="step2 step-item" >
            <van-form  @submit="registHandler">
                <van-cell-group inset>
                    <van-field
                    v-model="password"
                    name="密码"
                    label="密码"
                    placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码', pattern: /^\w{5,10}$/ }]"
                    />
         
                    <van-field
                    v-model="rpwd"
                    name="再次输入密码"
                    label="再次输入密码"
                    placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码', pattern: /^\w{5,10}$/ }]"
                    />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                    注册
                    </van-button>
                 </div>
            </van-form>
        </div>
        

        <!-- 第四步 -->
        <div  v-if="active ===3" class="step3 step-item" >
            <van-icon class="finish" name="certificate" />
            <router-link to="/login">
                <van-button> 去登录 </van-button>
            </router-link>
        </div> 
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { checkHandlerApi, sendCodeApi,checkCodeApi, registerApi } from '@/api/user'
import { Toast } from 'vant';
 
//准备一个变量表示 步骤条 数据
const active = ref<number>(0)

//验证手机号
const phone = ref<string>('')
const checkPhoneHandler =async () =>{
    const res = await checkHandlerApi(phone.value)
    console.log(res)

//判断结果
//表示可以继续
if(((res as unknown) as {code: string}).code === '200') {
    //继续下一步,
    ///调整 active  就可以了
    active.value++
    return
}


//代码执行到这里， 说明手机号不行
Toast({
    message: '手机号已被注册' ,
    icon  :'phone-circle-0',
})
}


//发送验证码
const code =ref<string>('')
//发送验证码到你的手机号(phone)
const codeBtn =ref<boolean>(false)


const sendCodeHandler = async () =>{
    codeBtn.value = true

    //发送验证码到你的手机号
    const res = await sendCodeApi(phone.value)
    console.log(res)
}


//验证验证码
const checkCodeHandler =async () =>{
    const res =await checkCodeApi(phone.value ,code.value)
    console.log(res)

    // 判断结果
    // 表示可以继续
  if (((res as unknown) as { code: string }).code === '200') {
    // 继续下一步
    // 调整 active 就可以了
    active.value++
    return
  }

  // 代码执行到这里, 说明手机号不行
  Toast({
    message: '验证码错误',
    icon: 'phone-circle-o',
  })
}

//采集密码
const password =ref<string>('')

const rpwd = ref<string>('')

//提交方法
const registHandler = async () =>{

    // 两次密码不一致
    if(password.value !== rpwd.value ) return Toast({
        message: '两次密码不一致',
        icon:'phone-circle-o',
    })

    // 发送请求
    const res = await registerApi(phone.value , password.value)

    // 判断结果
    // 表示可以继续
  if (((res as unknown) as { code: string }).code === '200') {
    // 继续下一步
    // 调整 active 就可以了
    active.value++
    return
  }

  // 代码执行到这里, 说明手机号不行
  Toast({
    message: '注册失败，请重试',
    icon: 'phone-circle-o',
  })

}





</script>

<style scoped lang="scss">
.sdy-register{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    >.steps{
        width: 80%;

    }
    >.step-item{
        width: 80%;
        height: 150px;
        border-radius: 10px;
        border: 2px solid skyblue;
        margin-top: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        }
    }
     .finish {
        font-size: 80px;
        color: rgb(14, 241, 97);
        margin: 5px;
    
}
  

</style>